<template>
  <basic-container>
    <avue-tabs :option="linkOption" @change="handleLinkChange"></avue-tabs>
    <span v-if="linkTabType.prop === 'linkConfiguration'">
      <avue-form :option="optionForm" v-model="dataForm" ref="form">
        <template slot-scope="{row,index}" slot="text">
         <el-input v-model="row.text"
                   size="small"
                   placeholder="请选择人员"
                   readonly
                   @click.native="handleSelect(row,index, 'user-select')">
                        <template slot="append">
                          <el-button icon="el-icon-plus" size="small"></el-button>
                        </template>
         </el-input>
        </template>
      </avue-form>
    </span>
    <span v-else>
    <avue-crud :option="option"
               :table-loading="crudData.loading"
               :data="crudData.data"
               :page.sync="crudData.page"
               v-model="crudData.form"
               ref="crud"
               @current-change="currentChange"
               @size-change="sizeChange"
               @on-load="onLoad"
    >
    </avue-crud>
    </span>
    <user-select ref="user-select"
                 check-type="checkbox"
                 :user-url="userUrl"
                 :custom-option="customOption"
                 :default-checked="crudData.defaultChecked"
                 @onConfirm="handleSelectConfirm">
    </user-select>
  </basic-container>
</template>
<script>
import UserSelect from "@/views/eventManagement/components/user-select.vue";

export default {
  name: "businessProcess",
  props: {
    itemData: {
      type: Object,
      default: () => {
      }
    }
  },
  components: {UserSelect},
  computed: {
    userUrl() {
      return this.userOption.userUrl
    },
    customOption() {
      return this.userOption.customOption
    },
  },
  data() {
    return {
      optionForm: {
        submitBtn: false,
        emptyBtn: false,
        column: [
          {
            label: '办理系统',
            prop: 'itemLevel',
            span: 12,
            type: "select",
            dicUrl: "/api/blade-system/dict-biz/dictionary?code=itemLevel",
            props: {
              label: "dictValue",
              value: "dictKey"
            },
            dicData: [],
            rules: [{
              required: true,
              message: "该事项暂无办理系统",
              trigger: "blur"
            }],
            disabled: true,
          },
          {
            label: '环节配置',
            prop: 'processConfiguration',
            type: 'dynamic',
            span: 24,
            children: {
              align: 'center',
              headerAlign: 'center',
              rowAdd: (done) => {
                done({
                  input: '默认值'
                });
              },
              rowDel: (row, done) => {
                done();
              },
              column: [{
                label: '环节名称',
                prop: "linkName",
                rules: [{
                  required: true,
                  message: "请输入环节名称",
                  trigger: "blur"
                }],
              }, {
                label: '环节办理时限（天）',
                prop: "timeLimit",
                type: 'number',
                rules: [{
                  required: true,
                  message: "请输入环节办理时限",
                  trigger: "blur"
                }],
                min: 0,
                value: 0,
                precision: 0,
              }, {
                label: '排序（顺序）',
                prop: "linkSort",
                rules: [{
                  required: true,
                  message: "请输入排序号",
                  trigger: "blur"
                }],
                min: 0,
                type: 'number',
                value: 1,
                precision: 0,
              }, {
                label: '人员',
                rules: [{
                  required: true,
                  message: "请选择人员",
                  trigger: "blur"
                }],
                prop: "text",
                slot: true
              }]
            }
          },
        ]
      },
      dataForm: {},
      userOption: {
        userUrl: '/api/blade-user/search/user',
        roleUrl: '/api/blade-system/search/role',
        deptUrl: '/api/blade-system/search/dept',
        postUrl: '/api/blade-system/search/post',
      },
      linkOption: {
        column: [
          {
            icon: 'el-icon-setting',
            label: '环节配置',
            prop: 'linkConfiguration'
          },
          {
            icon: 'el-icon-info',
            label: '环节版本',
            prop: 'linkVersion'
          }
        ]
      },
      linkTabType: {
        icon: 'el-icon-setting',
        label: '环节配置',
        prop: 'linkConfiguration'
      },
      option: {
        refreshBtn: false,
        columnBtn: false,
        searchShowBtn: false,
        calcHeight: 30,
        tip: false,
        border: true,
        selection: false,
        dialogType: 'drawer',
        addBtn: false,
        editBtn: false,
        delBtn: false,
        align: 'center',
        index: true,
        indexLabel: '序号',
        searchMenuPosition: "left",
        searchLabelWidth: 120,
        searchMenuSpan: 6,
        column: [
          {
            label: '流程名称',
            prop: 'linkModelName',
          },
          {
            label: '版本',
            prop: 'linkVersion',
            width: 300
          },
          {
            label: '创建时间',
            prop: 'createTime',
            width: 400
          },
        ]
      },
      crudData: {
        loading: true,
        data: [],
        selectIndex: '',
        defaultChecked: {},
        page: {
          pageSize: 10,
          currentPage: 1,
          total: 0
        },
        form: {},
        query: {},
      },
    }
  },
  methods: {
    handleSelectConfirm(params) {
      this.dataForm.processConfiguration[this.crudData.selectIndex] = Object.assign(this.dataForm.processConfiguration[this.crudData.selectIndex], params)
      console.log('dataForm==>', this.dataForm.processConfiguration)
    },
    handleSelect(row, index, ref) {
      console.log('HGGGGG-====>', row, index)
      this.crudData.selectIndex = index
      this.crudData.defaultChecked = row;
      this.$refs[ref].visible = true
    },
    saveAllData() {
      this.$refs.form.validate((valid, done, msg) => {
        let userData = this.dataForm.processConfiguration;
        if (valid) {
          let itemLevel = this.dataForm.itemLevel;
          //如果是无须自建  只保存办理系统类型
          if (itemLevel === '5') {
            if (userData.length > 0) {
              this.testLinkSave(this.dataForm, done)
            } else {
              taskActivityConfig(this.linkTabType.prop, this.dataForm.taskId, this.dataForm.itemLevel, null).then(res => {
                this.$message.success("操作成功");
                done();
                this.$emit('closeBus')
              });
            }
          } else if (itemLevel === '3' && userData.length > 0) {
            this.testLinkSave(this.dataForm, done)
          } else if (itemLevel === '3' && userData.length === 0) {
            this.$message.error('环节配置信息没有输入完整');
            done();
          } else {
            //如果是国垂、省垂、市自建这三种类型 不做必须维护控制，但是如果维护了环节节点，还按照规则进行校验
            if (userData.length > 0) {
              this.testLinkSave(this.dataForm, done)
            } else {
              //没有选择环节 只保存业务办理系统类型
              taskActivityConfig(this.linkTabType.prop, this.dataForm.taskId, this.dataForm.itemLevel, null).then(res => {
                this.$message.success("操作成功");
                done();
                this.$emit('closeBus')
              });
            }
          }
          done()
        } else {
          console.log('error submit!!');
          return false;
        }
      })
    },
    handleLinkChange(column) {
      this.linkTabType = column;
      this.$emit('btnFlag', column)
    },
    currentChange(currentPage) {
      this.crudData.page.currentPage = currentPage;
    },
    sizeChange(pageSize) {
      this.crudData.page.pageSize = pageSize;
    },
    onLoad(page, params = {}) {
      this.crudData.loading = true;
    }
  }
}
</script>
<style scoped>

</style>
